<template>
  <div>
    <el-form :inline="true" :model="formData">
      <el-form-item>
        <el-input v-model="formData.name" placeholder="输入机构名称或者拼音首字母"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch('treeGrid')">搜索</el-button>
        <el-button type="primary" icon="delete" @click="handleClear('treeGrid')">清空</el-button>
      </el-form-item>
    </el-form>

    <Treegrid :data="treeGrid" ref="treeGrid"></Treegrid>
  </div>
</template>

<script>
  import Treegrid from "@/components/Treegrid.vue";
  import {methods} from "@/core";

  export default {
    components: {Treegrid},
    mixins: [methods],
    data () {
      return {
        formData: {name: ""},
        treeGrid: {
          url: "/certificate.json",
          deleteUrl: "/certificate.json",
          expand: false,
          pagination: true,
          align: "center",
          columns: [
            {field: "organization", title: "机构", width: 200},
            {field: "organization_type", title: "机构类别", width: 100},
            {field: "certificate_type", title: "证书类别",},
            {field: "date", title: "到期日期", width: 150},
            {field: "state", title: "状态", formatter: row => {
              return row.state ? `<span class="green_circle"></span>` : `<span class="red_circle"></span>`;
            }},
            {field: "", title: "操作", operate: [
              {name: "修改", handle: this.handleEdit},
              {name: "删除", handle: this.handleDelete("treeGrid")},
            ]}
          ],
          loadFilter (data) {
            // 处理数据
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form /deep/ .el-input__inner {
    width: 620px;
    border: none;
  }
</style>
